const path = require('path')
const HtmlWebPackPlugin = require("html-webpack-plugin")

const threadLoader = require('thread-loader')

const appWorkerPool = {
    poolTimeout: Infinity
}

const cssWorkerPool = {
    workerParallelJobs: 2,
    poolTimeout: Infinity
};

const addWarmUp = (options, modules) => {
    threadLoader.warmup(options, modules)
}

addWarmUp(appWorkerPool, [
    'babel-loader',
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
])

addWarmUp(cssWorkerPool, [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'postcss-import',
    'autoprefixer'
])

module.exports = {
    // bail: true,
    cache: {
        type: 'filesystem',
        allowCollectingMemory: true,
        buildDependencies: {
            // This makes all dependencies of this file - build dependencies
            config: [__filename],
            // By default webpack and loaders are build dependencies
          },
          cacheDirectory: path.resolve(__dirname, '.cache')
    },
    module: {
        rules: [
            {
                //only the js and jsx will be considered
                test: /\.ts(x)$/,
                exclude: /node_modules/,
                use: [
                    // {
                    //     loader: 'thread-loader',
                    //     options: appWorkerPool
                    // },
                    {  
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                ['@babel/preset-react', {
                                    'runtime': 'automatic'
                                }],
                                '@babel/preset-typescript'
                            ]
                        }
                    }
                ],
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    // {
                    //     loader: 'thread-loader',
                    //     options: cssWorkerPool
                    // },
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
    //                         modules: {
    //                             localIdentName: "[path][name]__[local]--[hash:base64:5]"
    // ,                        },
    
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-import",
                                    'autoprefixer'
                                ],
                              },
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                // More information here https://webpack.js.org/guides/asset-modules/
                type: "asset",
              },
        ]
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, './public/index.html'),
            inject: 'body'
        })
    ],

    entry: {
        app: './src/index.tsx'
    },

    devtool: 'source-map',

    devServer: {
        contentBase: './dist',
    },

    output: {
        filename: 'bundle.[name].js',
        path: path.resolve(__dirname, 'dist'),
    },

    mode: 'development',
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        symlinks: false,
    },
    stats: {
        errorDetails: true
    }
};